<template>
  <div>
    <el-page-header @back="goBack" :content="$route.query.id ? '编辑场景配置' : '新建场景配置'"> </el-page-header>

    <div class="ueba-detail-main">
      <base-form
        ref="formData"
        :ruleForm="formData.data"
        :rules="formData.rules"
        :formValidateData="formData.config"
        :optionData="optionData"
      >
      </base-form>
    </div>
  </div>
</template>

<script>
import baseForm from "components/formValidate/myForm";

export default {
  components: {
    baseForm,
  },
  props: {},
  data() {
    return {
      canSubmit: true,
      formInline: {},
      optionData: {
        pmAccount: [],
        noticeUsers: [],
        leader: [],
      },
      formData: {
        data: {
          question: "",
          options: "",
          remark: "",
        },
        config: [
          {
            type: "text",
            span: 24,
            label: "场景类型",
            prop: "question",
          },
          {
            type: "select",
            span: 24,
            clearable: true,
            filterable: true,
            label: "选项类型",
            prop: "options",
            option: this.$store.state.dictionary[101005],
          },
          { type: "textarea", span: 24, label: "备注", prop: "remark" },
          {
            type: "operation",
            style: { "text-align": "center" },
            children: [
              {
                label: "保 存",
                type: "primary",
                click: () => {
                  //if中是验证表单有没有通过，不是提交数据
                  if (this.$refs.formData.submitForm()) {
                    //这里是提交数据
                    this.submitForm();
                  }
                },
              },
            ],
          },
        ],
        rules: {
          question: [
            { required: true, message: "请输入场景类型", trigger: "blur" },
            // { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
          ],
          options: [
            { required: true, message: "请输入场景名称", trigger: "blur" },
            // { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
          ],
        },
      },
    };
  },
  async mounted() {
    if (this.$route.query.id) {
      // edit
      this.formData.data = await this.fatchData(this.$route.query.id);
    } else {
      // add
    }
  },
  methods: {
    goBack() {
      this.$router.push("/config/scenemanage/scenemanage");
    },
    async submitForm() {
      let params = Object.assign({}, this.formData.data);
      if (this.canSubmit) {
        this.canSubmit = false;
        let res = await this.$store.dispatch("config/sceneSave", params);
        if (res.code == 0) {
          this.message.state(res);
          this.goBack();
        }
      }
    },

    async fatchData(id) {
      let res = await this.$store.dispatch("config/sceneDetail", { id: id });
      return res.data;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.check-box {
  margin: 0 0 20px 20px;
}
</style>
